/* Quiz-specific styles - deliberately separate from jadecss.css rather than extending it.
   The main site's body/link colors (white text, textured background image) are tuned for a
   photo-heavy portfolio page, not a text-heavy reading/quiz surface, so the quiz gets its own
   readable light card on top of the same page chrome instead of fighting that base styling. */

/* jadecss.css sets `* { font-family: cursive; }` - a UNIVERSAL selector, which matches every
   element directly rather than just setting a value that's meant to be inherited. That means it
   was overriding font-family on every individual button/heading/list item inside the quiz card
   in its own right, so setting font-family on .quiz-wrapper alone never actually reached its
   children (inheritance only applies when nothing else set an explicit value, and the universal
   selector counts as "something else" for every single element). Targeting ".quiz-wrapper *" as
   well gives this rule higher specificity than the bare "*" selector, so it wins outright. */
.quiz-wrapper, .quiz-wrapper * {
    font-family: "Comic Sans MS", "Comic Sans", Arial, sans-serif;
}

.quiz-wrapper {
    max-width: 640px;
    margin: 30px auto;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.93);
    border: 2px solid black;
    border-radius: 10px;
    color: rgb(20, 20, 20);
    text-align: left;
}

.quiz-wrapper h1, .quiz-wrapper h2 {
    text-align: center;
    color: rgb(20, 20, 20);
}

.quiz-intro p {
    font-size: 18px;
    color: rgb(20, 20, 20);
    text-align: left;
}

.quiz-setup-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 20px 0;
    font-size: 18px;
}

.quiz-setup-row input[type="number"] {
    width: 60px;
    font-size: 18px;
    text-align: center;
    padding: 4px;
}

.quiz-button {
    display: block;
    margin: 20px auto;
    padding: 10px 26px;
    font-size: 20px;
    font-family: inherit;
    cursor: pointer;
    background-color: rgb(50, 46, 60);
    color: white;
    border: 2px solid black;
    border-radius: 6px;
}

.quiz-button:hover {
    background-color: rgb(80, 74, 96);
}

.quiz-button:disabled {
    background-color: rgb(160, 160, 160);
    cursor: not-allowed;
}

.quiz-progress {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    color: rgb(60, 60, 60);
}

.quiz-question {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.quiz-options {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.quiz-option {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-family: inherit;
    padding: 12px 16px;
    margin: 8px 0;
    background-color: rgb(240, 240, 240);
    border: 2px solid rgb(120, 120, 120);
    border-radius: 6px;
    cursor: pointer;
}

.quiz-option:hover:not(:disabled) {
    background-color: rgb(222, 222, 240);
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option.correct {
    background-color: rgb(198, 239, 198);
    border-color: rgb(40, 130, 40);
    font-weight: bold;
}

.quiz-option.incorrect {
    background-color: rgb(245, 200, 200);
    border-color: rgb(160, 40, 40);
}

.quiz-feedback {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 17px;
}

.quiz-feedback.right {
    background-color: rgb(222, 245, 222);
    border: 1px solid rgb(40, 130, 40);
}

.quiz-feedback.wrong {
    background-color: rgb(250, 228, 228);
    border: 1px solid rgb(160, 40, 40);
}

.quiz-feedback .quiz-feedback-heading {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

.quiz-score-summary {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    margin: 20px 0;
}

.quiz-history {
    margin-top: 30px;
    border-top: 2px solid rgb(180, 180, 180);
    padding-top: 16px;
}

.quiz-history h2 {
    font-size: 24px;
}

.quiz-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.quiz-history th, .quiz-history td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid rgb(210, 210, 210);
}

.quiz-history-empty {
    text-align: center;
    color: rgb(100, 100, 100);
    font-style: italic;
}

.quiz-hidden {
    display: none;
}